<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
    <transition name="slide-right">
        <div class="manage-box">
            <header class="mui-bar immerse-margin">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="backRoute()"></a>
                <div class="mui-title" style="font-size: 0.3rem;font-weight: normal">{{ $t('m.wallet.manager.index.listTitle') }}</div>
            </header>
            <div class="manage-content">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a class="">
                            <img class="mui-media-object mui-pull-left manage-userimg" :src="walletActive.avatar">
                            <div class="mui-media-body" style="width: 60%;">
                                ETSC-Wallet-{{ walletActive.index }}
                                <p class='mui-ellipsis'>{{ addressSub(walletActive.address) }}
                                    <img src="@/assets/img/coffer/copy-two.png" alt="" style="width:14px;height:12px;vertical-align: middle"
                                         v-clipboard:copy="walletActive.address"
                                         v-clipboard:success="doClipboard"
                                         v-clipboard:error="">
                                </p>
                            </div>
                        </a>
                    </li>

                </ul>
                <ul class="mui-table-view mg-top">
                    <!--密码提示和导出助记词只有自己创建的钱包才显示-->
                    <li class="mui-table-view-cell" v-show="walletActive.tip != ''" @click="showTip()">
                        <a class="mui-navigate-right">
                            <img class="manage-icon" src="@/assets/img/tips.png">
                            <span class="manage-text">{{ $t('m.wallet.manager.index.prompt[0]') }}</span>
                        </a>
                    </li>
                    <li class="mui-table-view-cell" v-show="walletActive.mnemonic != ''" @click="mnemonicPre()">
                        <a class="mui-navigate-right">
                            <img class="manage-icon" src="@/assets/img/createwallet/daochu.png">
                            <span class="manage-text">{{ $t('m.wallet.manager.index.prompt[1]') }}</span>
                        </a>
                    </li>

                    <li class="mui-table-view-cell" @click="keystorePre()">
                        <a class="mui-navigate-right">
                            <img class="manage-icon" src="@/assets/img/createwallet/wenjianjia.png">
                            <span class="manage-text">{{ $t('m.wallet.manager.index.prompt[2]') }}</span>
                        </a>
                    </li>
                    <li class="mui-table-view-cell" @click="privatePre()">
                        <a class="mui-navigate-right">
                            <img class="manage-icon" src="@/assets/img/createwallet/miyuechaxun.png">
                            <span class="manage-text">{{ $t('m.wallet.manager.index.prompt[3]') }}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <Alert_little></Alert_little>
            <Prompt></Prompt>
            <Loading></Loading>
        </div>
    </transition>
</template>
<script>
    import {mapState, mapActions} from 'vuex'
    import {myAlert} from "@/assets/js/h5plus/nativeUI";
    import {AESDecrypt} from '@/assets/js/utils/crypto'
    import {generateKeystore} from '@/assets/js/etherjs/wallet';

    export default {
        name: 'wallet_manager_index',
        created() {
        },
        mounted() {
        },
        computed: {
            ...mapState("wallet", [
                "walletActive"
            ]),
            ...mapState("modal", {
                prompt: state => state.prompt,
            }),
        },
        watch: {
            // 监听密码框-确认按钮
            prompt(v) {
                if (v.isConfirm) {
                    if (v.complete == 'mnemonic') {
                        // computed计算到的变化，不及时？
                        this.mnemonicDo(v.value);
                    }
                    if (v.complete == 'private') {
                        // computed计算到的变化，不及时？
                        this.privateDo(v.value);
                    }
                    if (v.complete == 'keystore') {
                        // computed计算到的变化，不及时？
                        this.keystoreDo(v.value);
                    }
                }
            }
        },
        data() {
            return {}
        },
        methods: {
            doClipboard: function () {
                this.aAlert_little({
                    msg: this.$t('m.wallet.manager.private.prompt[15]'),
                    top: "220px"
                })
            },
            showTip: function () {
                myAlert({
                    msg: this.walletActive.tip,
                    button: this.$t('m.wallet.manager.index.prompt[4]')
                });
            },
            mnemonicPre: function () {
                this.aPrompt({
                    show: true,
                    title: this.$t('m.wallet.manager.index.prompt[5]'),
                    cancel: this.$t('m.wallet.manager.index.prompt[6]'),
                    confirm: this.$t('m.wallet.manager.index.prompt[4]'),
                    type: "password",
                    placeholder: this.$t('m.wallet.manager.index.prompt[5]'),
                    complete: "mnemonic"
                })
            },
            mnemonicDo: function (pwd) {
                // 生成助记词
                let mnemonic = AESDecrypt({
                    pwd: pwd,
                    msg: this.walletActive.mnemonic
                });
                if (mnemonic == '') {
                    myAlert({
                        msg: this.$t('m.wallet.manager.index.prompt[7]'),
                        button: this.$t('m.wallet.manager.index.prompt[4]')
                    });
                } else {
                    this.aWalletDecode({
                        mnemonic: mnemonic
                    });
                    this.changeRoute("/wallet/backup/mnemonic")
                }
            },
            privatePre: function () {
                this.aPrompt({
                    show: true,
                    title: this.$t('m.wallet.manager.index.prompt[5]'),
                    cancel: this.$t('m.wallet.manager.index.prompt[6]'),
                    confirm: this.$t('m.wallet.manager.index.prompt[4]'),
                    type: "password",
                    placeholder: this.$t('m.wallet.manager.index.prompt[5]'),
                    complete: "private"
                })
            },
            privateDo: function (pwd) {
                // 生成助记词
                let pKey = AESDecrypt({
                    pwd: pwd,
                    msg: this.walletActive.pKey
                });
                if (pKey == '') {
                    myAlert({
                        msg: this.$t('m.wallet.manager.index.prompt[7]'),
                        button: this.$t('m.wallet.manager.index.prompt[4]')
                    });
                } else {
                    this.aWalletDecode({
                        pKey: pKey
                    });
                    this.changeRoute("/wallet/manager/private")
                }
            },
            keystorePre: function () {
                this.aPrompt({
                    show: true,
                    title: this.$t('m.wallet.manager.index.prompt[5]'),
                    cancel: this.$t('m.wallet.manager.index.prompt[6]'),
                    confirm: this.$t('m.wallet.manager.index.prompt[4]'),
                    type: "password",
                    placeholder: this.$t('m.wallet.manager.index.prompt[5]'),
                    complete: "keystore"
                })
            },
            async keystoreDo(pwd) {
                let keystore;
                // keystore 不存在的时候
                if (this.walletActive.keystore == "") {

                    let pKey = AESDecrypt({
                        pwd: pwd,
                        msg: this.walletActive.pKey
                    });
                    if (pKey == "") {
                        myAlert({
                            msg: this.$t('m.wallet.manager.index.prompt[7]'),
                            button: this.$t('m.wallet.manager.index.prompt[4]')
                        });
                        return;
                    }
                    this.aLoading({
                        show: true,
                        tip: this.$t('m.wallet.manager.index.prompt[8]')
                    });
                    keystore = await generateKeystore({
                        pKey: pKey,
                        pwd: pwd
                    });
                    this.aLoading({
                        show: false,
                        tip: ""
                    });
                } else {
                    keystore = AESDecrypt({
                        pwd: pwd,
                        msg: this.walletActive.keystore
                    });
                    if (keystore == '') {
                        myAlert({
                            msg: this.$t('m.wallet.manager.index.prompt[7]'),
                            button: this.$t('m.wallet.manager.index.prompt[4]')
                        });
                        return;
                    }
                }
                this.aWalletDecode({
                    keystore: keystore
                });
                this.changeRoute("/wallet/manager/keystore")
            },
            ...mapActions('modal', [
                'aPrompt'
            ]),
            ...mapActions('wallet', [
                'aWalletCreate', 'aWalletActive', 'aWalletDecode'
            ])
        }
    }
</script>
<style scoped>
    @import '../../../assets/css/walletmanage.css';
    .manage-box>header{
        position: inherit;
    }
    .manage-content{
        padding-top: .42rem;
    }

</style>
